<template>
  <page-wrap hideTab :title="activity.activityName || '报告详情'" back stayStill
    :previewId="{  activityIdCode:activity.id,sharePersonId:personId }">
    <view class="detail" v-show="loaded">
      <view class="preview-box">
        <view class="pre-img-wrap">
          <template v-for="item,index in activity.activitySubRel.previewImgList">
            <image :src="item" :key="index" mode="widthFix" class="preview-img"></image>
          </template>
          <view v-if="!isBuy" class="check-more" @click="goToDetail">
            <view class="text">剩余{{activity.activitySubRel.previewPages || 0}}页，点击查看全部 <u-icon name="arrow-down">
              </u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="recommend" v-if="recommendActivityList">
        <view class="recommend-title"> 猜你喜欢 </view>
        <view class="list">
          <ContentItem v-for="(item, index) in recommendActivityList" :key="index" type="like" :item="item"
            @click="handleClick(item)" />
        </view>
      </view>
    </view>

    <VipPopup :show.sync="showPopup" :status="status" typeText="报告" :rightsInfo="activityRightVo" :activity="activity"
      @buy="handleBuy" @update="handleUpdate" @check="handleCheck" @free="handleFree" />

    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
import ContentItem from "../components/ConentItem.vue";
import VipPopup from "../components/VipPopup.vue";

import reprotAndCaseDetailMixin from "../mixins/reportAndCase"; // 报告、案例详情逻辑
import ShareMixin from '@/mixins/share';
import LoginDialog from "@/components/LoginDialog";
import { getPersonBindCompanyStatus,} from '@/api/modules/company';

export default {
  mixins: [reprotAndCaseDetailMixin, ShareMixin],
  components: {
    ContentItem,
    VipPopup,
    LoginDialog,
  },
  methods: {
    setShareInfo() {
      this.shareTitle = this.activity.activityName;
      this.sharePath =
        "pagesSub/companyCenter/report/detail?id=" +
        this.activity.activityIdCode +
        "&sharePersonId=" +
        this.personId +
        "&fromLoginStatus=" +
        uni.getStorageSync("login-status");
      this.imageUrl = this.activity.bannerUrl;
      this.shareQuery= "id="+ this.activity.activityIdCode + "&fromLoginStatus=" + uni.getStorageSync("login-status");
    },
    goToDetail(){
      console.log("goToDetail",this.personId);
      if(this.personId){
        this.handleDetail();
      }else{
        this.showLoginDialog();
      }
    },
    showLoginDialog(){
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack(){
      console.log("loginSuccessBack");
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    }
  }
};
</script>

<style lang="scss" scoped>
.detail {
  background-color: #f4f6f8;

  .preview-box {
    .pre-img-wrap {
      position: relative;
      margin: 32rpx 24rpx 0 24rpx;
      .preview-img {
        margin-bottom: 20rpx;
        border-radius: 16rpx;
      }
      .check-more {
        position: absolute;
        z-index: 2;
        bottom: 0;
        width: 100%;
        padding: 196rpx 0 12rpx 0;
        font-size: 30rpx;
        text-align: center;
        color: #f75a3e;
        background-image: url($img-base + "report/mask2.png");
        background-size: 100% 100%;

        u-icon {
          margin-left: 8rpx;
        }
      }
      image {
        width: 100%;
      }
    }

    .pre-img {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }

    .preview-btn {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 342rpx;
      height: 160rpx;
      text-align: center;
      line-height: 140rpx;
      background-image: url($img-base + "report/react.png");
      background-size: 100% 100%;
      background-position: center 10%;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff6969;

      .icon-book {
        width: 36rpx;
        height: 36rpx;
        margin-right: 10rpx;
        background-image: url($img-base + "report/book.png");
      }
    }
  }

  .recommend {
    &-title {
      margin-left: 32rpx;
      margin-bottom: 28rpx;
      font-size: $uni-font-size-big;
      color: #222222;
    }
  }
}
</style>